$grid_default: 12;
$col_default: 12;
$gutter_default: 0;
$margin_default: 0 0 0;

@mixin clearfix() {
	*zoom:1;

	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}

@mixin row-res{
	clear: both;
	padding: 0;
	margin-right: 0;
	@include clearfix;
}

@mixin col-res($gutter: $gutter_default, $margin: $margin_default){
	display: block;
	float: left;
	margin: $margin #{$gutter * 1%};
	&:first-child{
		margin-left: 0;
	}
	@media only screen and (max-width: 480px) {
		margin: $margin 0;
	}
}

@mixin col_wid($grid: $grid_default,$col: $col_default, $gutter: $gutter_default){

	$wid:(100 - ( ( $grid / $col ) - 1) * $gutter ) / ( $grid / $col );
	width: $wid * 1%;
	@media only screen and (max-width: 480px) {
		width: 100%;
	}
}

.container{
	background-color: red;
	ul{
		@include row-res;
		li{
			@include col-res(1);
 			@include col_wid(6,1,1);
 			background-color: green;
 			text-align: center;
		}
	}
}

@media only screen and (max-width: 700px) {
.container{
	background-color: red;
	ul{
		@include row-res;
		li{
			@include col-res(0);
 			@include col_wid(2,1);
 			background-color: green;
 			text-align: center;
		}
	}
}
}
